import type { CSSProperties } from 'vue';
import { allowPaste } from '../../../data/stage';
import type { IShapeProps } from '../../../types/IShape';
import { filterBoolean } from '../../../utils/dom.utils';

/**
 * 注释: 字体组件失焦触发
 *
 * */
export const onTextBlur = (item: IShapeProps) => {
  // var current = findShapeById(item.id)
  // if (!current) return
  // var dom = document.getElementById(item.id) as HTMLElement
  // current.edit = false
  // current.text = dom.innerText
  item.edit = false;
};

/**
 * 注释: 文字输入时，自动检测宽高
 *
 * */
export const onTextKeyDown = () => {
  // var current = findShapeById(id)
  // var dom = document.getElementById(id) as HTMLElement
  // current.text = dom.innerText
};

/**
 * 注释: 字体样式
 *
 * */
export const getTextStyle = (item: IShapeProps): CSSProperties => {
  return {
    backgroundColor: item.bgcolor,
    fontSize: `${item.fontSize}px`,
    color: item.textColor,
    // lineHeight: item.lineHeight + "px",
    overflow: filterBoolean(item.overflow, 'hidden'),
    whiteSpace: `${item.wrap}`,
    fontStyle: item.fontStyle,
    fontWeight: item.bold ? 600 : 400,
    textDecoration: item.decoration,
    verticalAlign: item.verticalAlign,
    letterSpacing: `${item.letterSpacing}px`,
    wordSpacing: `${item.wordSpacing}px`,
    wordBreak: !item.wordWrap ? 'break-all' : 'normal',
    fontFamily: item.fontFamily,
    border: item.hasBorder ? `1px solid ${item.borderColor} !important` : 'none',
  };
};

/**
 * 注释: 当文本聚焦，禁止框选
 *
 * */
export const onDblClick = (item: IShapeProps) => {
  // dragBoxConfig.value.show = false
  item.edit = true;
  // item.resizable = false;
};

/**
 * 注释: 文本聚焦的时候触发
 *
 * */
export const onTextFocus = (item: IShapeProps) => {
  // item.resizable = false;
  allowPaste.value = false;
};
